<%-- 
    Document   : editarCapituloDisplay
    Created on : 13-12-2014, 18:11:58
    Author     : Rodrigo
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<c:set var="contextPath" value="${pageContext.servletContext.contextPath}"/>

<!DOCTYPE html>
<html>
    <head>
        <title>Editar capitulo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="${contextPath}/css/font-awesome.min.css">
        <link rel="stylesheet" href="${contextPath}/css/epraxis.css">
        <link rel="stylesheet" href="${contextPath}/css/jquery-te-1.4.0.css">
        <style type="text/css">
            .jqte_tool_label  {
                height: 24px !important;
                min-height: 24px !important;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <h2 class="text-center">Capitulo ${capitulo.nombre}</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <form id="formCapituloEditar" name="formCapituloEditar">
                        <input type="hidden" name="capitulo" value="${capitulo.id}"/>
                        <input type="hidden" name="modo" value="EDIT"/>
                        <input type="hidden" name="curso" value="${curso.id}"/>
                        <strong class="font-size-14">Unidad</strong>
                        <select name="unidadCapitulo" class="form-control">
                            <option value="0"></option>
                            <c:forEach var="unidad" items="${listaUnidad}">
                                <c:choose>
                                    <c:when test="${capitulo.unidad.id == unidad.id}">
                                        <option value="${unidad.id}" selected>${unidad.nombre}</option>
                                    </c:when>
                                    <c:otherwise>
                                        <option value="${unidad.id}">${unidad.nombre}</option>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                        </select>
                        <br>
                        <strong class="font-size-14">Nombre del capitulo</strong>
                        <input type="text" id="nombreUnidad" name="nombreCapitulo" class="form-control" value="${capitulo.nombre != null ? capitulo.nombre : ''}"/>
                        <br>
                        <strong class="font-size-14">Descripción</strong>
                        <textarea name="descripcionCapitulo" class="form-control">${capitulo.descripcion != null ? capitulo.descripcion : ''}</textarea>
                        <br>
                        <strong class="font-size-14">Contenido</strong>
                        <span class="help-block">
                            Escriba el contenido del capitulo
                        </span> 
                        <textarea id="contenidoCapitulo" name="contenidoCapitulo" class="form-control"></textarea>
                    </form>
                    <br><br>
                    <div class="text-center">
                        <button type="button" class="btn btn-default" onclick="cancelar()">Cancelar</button>
                        <button id="btnGuardarContenidoCurso" type="button" class="btn btn-primary" onclick="guardarContenidoCapitulo()"
                                data-loading-text="<i class='fa fa-spin fa-spinner'></i> Guardando...">
                            Guardar contenido del curso
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="${contextPath}/js/jquery-2.1.1.js"></script>
        <script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="${contextPath}/js/jquery-te-1.4.0.min.js"></script>
        <script type="text/javascript" src="${contextPath}/js/epraxis.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#contenidoCapitulo').jqte();
            <c:if test="${contenidoCapitulo != null}">
                $('#contenidoCapitulo').jqteVal('${contenidoCapitulo.contenido}');
            </c:if>

                $('.jqte_editor').focus();
            });

            function cancelar() {
                parent.cerrarModalEditar();
            }

            function guardarContenidoCapitulo() {
                startLoadingButton($('#btnGuardarContenidoCurso'));
                var contenidoCapitulo = encodeURIComponent($(".jqte_editor").html());
                var url = '${contextPath}/app/capitulo/CapituloProcess.do';
                var parametros = $('#formCapituloEditar').serialize() + '&contenidoCapitulo=' + contenidoCapitulo;
                post(url, parametros, function(data, isError) {
                    if (isError) {
                        alert(data);
                    } else {
                        cancelar();
                        parent.document.location.reload();
                    }
                });
            }
        </script>
    </body>
</html>